script(id="inspector/contextMenu.html", type="text/ng-template")
  ul.list-inline
    li(ng-if="item.menuSelection")
      .token.token-label.token-conext-menu-key(ng-bind="item.label")
    li.pair
      .value(ng-bind="item.menuContent")

script(id="inspector/graphItem.html", type="text/ng-template")
  ul.list-inline
    li(ng-if="item.isNode", ng-repeat="label in item.labels")
      .token.token-label(ng-style='styleForLabel(label)', ng-bind="label")
    li(ng-if="!item.isNode")
      .token.token-relationship-type(ng-style='styleForItem(item)', ng-bind="item.type")
    li.empty(ng-if='item.propertyList.length == 0') No properties
    li.pair
      .key(ng-bind-template="<id>: ")
      .value(ng-bind="item.id")
    li.pair(ng-repeat='property in item.propertyList')
      .key(ng-bind-template="{{property.key}}: ")
      .value(ng-bind="property.value")

script(id="inspector/label.html", type="text/ng-template")
  ul.list-inline
    li.inspector-icon
      .token.token-label(ng-style='{"background-color": item.style.props.color, "color": item.style.props["text-color-internal"]}') {{item.label || '*'}}
    li.colors
      ul.list-inline
        li Color:
        li(ng-repeat='scheme in colors')
          a(ng-style='{"background-color": scheme.color}'
            ng-class='{active: scheme.color == item.style.props.color && scheme["border-color"] == item.style.props["border-color"]}'
            ng-click="selectScheme(item, scheme)")
    li.node-sizes
      ul.list-inline
        li Size:
        li(ng-repeat='size in sizes')
          a(ng-class='{active: sizeLessThan(size.diameter, item.style.props.diameter)}'
            ng-style='nodeDisplaySize($index)'
            ng-click='selectSize(item, size)')
    li.attributes
      ul.list-inline
        li Caption:
        li
          a.attribute(ng-click='selectCaption(item, "<id>")'
            ng-class="{selected: isSelectedCaption(item, '<id>')}") &lt;id&gt;
        li(ng-repeat='property in item.attrs')
          a.attribute(
            ng-click='selectCaption(item, "{" + property + "}")'
            ng-bind="property"
            ng-class="{selected: isSelectedCaption(item, '{' + property + '}')}")

script(id="inspector/relationshipType.html", type="text/ng-template")
  ul.list-inline
    li.inspector-icon
      .token.token-relationship-type(ng-style='{"background-color": item.style.props.color, "color": item.style.props["text-color-internal"]}') {{item.type  || '*'}}
    li.colors
      ul.list-inline
        li Color:
        li(ng-repeat='scheme in colors')
          a(ng-style='{"background-color": scheme.color}'
            ng-class='{active: scheme.color == item.style.props.color && scheme["border-color"] == item.style.props["border-color"]}'
            ng-click="selectScheme(item, scheme)")
    li.arrow-widths
      ul.list-inline
        li Size:
        li(ng-repeat='arrowWidth in arrowWidths')
          a(ng-style='arrowDisplayWidth($index)'
            ng-class='{active: arrowWidth["shaft-width"] == item.style.props["shaft-width"]}'
            ng-click='selectArrowWidth(item, arrowWidth)')
     li.attributes
      ul.list-inline
        li Caption:
        li
          a.attribute(ng-click='selectCaption(item, "<id>")'
            ng-class="{selected: isSelectedCaption(item, '<id>')}") &lt;id&gt;
        li
          a.attribute(ng-click='selectCaption(item, "<type>")'
            ng-class="{selected: isSelectedCaption(item, '<type>')}") &lt;type&gt;
        li(ng-repeat='property in item.attrs')
          a.attribute(
            ng-click='selectCaption(item, "{" + property + "}")'
            ng-bind="property"
            ng-class="{selected: isSelectedCaption(item, '{' + property + '}')}")
